{extend name="public:index"/} {block name="title"}{:sysconf('title')}{/block} {block name="content"}
<div class="nc_top1">
    <div class="top">
        <p class="p1">
            <a href="javascript:history.back(-1)"></a>
        </p>
        <p class="p2">商品详情</p>
        <!-- <p class="p3 {if condition='$info.collection eq 1'}cans{/if}" data-id="{$info.id}">
            <strong {if condition='$info.collection eq 1'}class="canstr"{/if}></strong>
        </p> -->
        <p class="p3" id="fenxiang" style="background: url(__INDEX__/images/fenxx.png) no-repeat center;
        background-size:1rem;"></p>
    </div>
    <div class="show_main">
        <div class="showbox">
            <div class="show show1">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        {foreach name="imglist" item="vo"}
                        <div class="swiper-slide"><img src="{$vo.img_url}"></div>
                        {/foreach}
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                <script>
                    var swiper = new Swiper('.swiper-container', {
                        nextButton: '.swiper-button-next',
                        prevButton: '.swiper-button-prev',
                        pagination: '.swiper-pagination',
                        paginationType: 'fraction'
                    });
                </script>
                <div class="btbox">
                    <b>{$info.title}</b>
                    <p class="p1">
                        <em>单价：￥{$info.sell_price}</em>
                    </p>
                    <!--<p class="p2">运费：10.00（首件运费10.00元，其他免费）</p>-->
                </div>
                <div class="projieshao">
                    <div class="btjies">产品介绍</div>
                    <div class="jiasbox" style="padding:20px;">
                        {$info.content}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="height:2.5rem;"></div>
    <div class="jiesuan1">
        <div class="left">
            <p class="p1"><a href="{:url('Index/index')}"><strong></strong><em>首页</em></a></p>
            <p class="p2">
                <a href="{:url('Cart/index')}">
                    <img src="__INDEX__/images/gwc.png">
                    <em>购物车</em>
                    <!--                     {if condition="$cartCount"}
                    <i style="display: block;">{$cartCount}</i>
                    {else/}
                    <i style="display: none;">0</i>
                    {/if} -->
                </a>
            </p>
        </div>
        <div class="right">
            <p class="p1" data-id="{$info.id}"><a href="javascript:;">加入购物车</a></p>
            <p class="p2"><a href="javascript:;" id="now_pay" data-id="{$info.id}">立即购买</a></p>
        </div>
    </div>
    <!--     <div class="tijia">
        <em>数量</em>
        <a href="javascript:;" class="J_add">+</a>
        <input type="text" value="1" class="J_input" readonly />
        <a href="javascript:;" class="J_minus">-</a>
    </div> -->
</div>
<img id="erweima" src="{$qrcode}" alt="" style="display:none;">
<img src="{$info['img_url']}" alt="" style="display:none;">
<canvas id="cvs" width="640" height="1136" style="display: none;border:0.1rem solid #fff;
background-color:#fff;box-sizing: border-box;width: 16rem;">
        当前浏览器不支持canvas
        <!-- 如果浏览器支持canvas，则canvas标签里的内容不会显示出来 -->
</canvas>
<div id="imggbox" style="position:fixed;top:0;left:0;z-index:999;background-color:rgba(0,0,0,.8);display:none;">
    <div style="padding:5%;width:90%;height:90%;">
        <img id="img1" src="" alt="" style="width:100%;height:100%;border-radius:10px;">
        <em style="background-color:#fff;width:20px;height:20px;position: absolute;bottom:10px;left: 50%;margin-left: -10px;
    border-radius:50%;line-height:20px;text-align:center;display:block;">x</em>
    </div>
</div>
<script type="text/javascript">
    $('#fenxiang').click(function() {
        $('#imggbox').show();
    });
    $('#imggbox em').click(function() {
        $('#imggbox').hide();
    });

    var txt = "{$info['title']}";
    var str = txt.substring(0, 20);
    var str1 = txt.substring(20, 100);
    var txt = str;
    var txt1 = str1;
    var gg = "￥{$info['sell_price']}";
    //获取canvas元素
    var cvs = document.getElementById("cvs");
    var height = window.innerHeight;
    var width = window.innerWidth;
    $('#cvs').css('height', height);
    $('#imggbox').css('width', width);
    $('#imggbox').css('height', height);


    var img = [],
        flag = 0,
        mulitImg = [
            "{$info['img_url']}",
            "{$qrcode}"
        ];
    var imgTotal = mulitImg.length;
    for (var i = 0; i < imgTotal; i++) {
        img[i] = new Image()
        img[i].src = mulitImg[i]
        img[i].onload = function() {
            //第i张图片加载完成
            flag++
            if (flag == imgTotal) {
                //全部加载完成
                var ctx = cvs.getContext('2d');
                ctx.fillStyle = "#fff";
                ctx.fillRect(0, 0, 400, 300); //fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
                ctx.fillStyle = "fff"; //为将要画的图像设置颜色
                ctx.fillRect(0, 0, 640, 1134); //图像的坐标以及宽高
                ctx.drawImage(img[0], 0, 0, 640, 760); //this即是imgObj,保持图片的原始大小：470*480
                ctx.drawImage(img[1], 430, 920, 180, 180);
                ctx.font = "28px 微软雅黑";
                ctx.fillStyle = "#333";
                ctx.fillText(txt, 20, 820);
                ctx.font = "28px 微软雅黑";
                ctx.fillStyle = "#333";
                ctx.fillText(txt1, 20, 860);
                ctx.font = "bold 30px 微软雅黑";
                ctx.fillStyle = "#ff0000";
                ctx.fillText(gg, 20, 930);

                ctx.font = "28px 微软雅黑";
                ctx.fillStyle = "#333";
                ctx.fillText(" {$username} 向您推荐", 20, 1000);

                ctx.font = "26px 微软雅黑";
                ctx.fillStyle = "#999";
                ctx.fillText("长按识别二维码，把宝贝带回家", 20, 1050);
                var myImage1 = cvs.toDataURL("image/jpg");
                var imageElement = document.getElementById("img1");
                imageElement.src = myImage1;
            }
        }
    }
</script>
<script type="text/javascript">
    $("#now_pay").click(function() {
        var obj = this;
        var goodsId = $(obj).data('id');
        var goodsCount = 1;
        $.ajax({
            type: "POST",
            url: "{:url('Cart/add')}",
            data: {
                'goodsId': goodsId,
                'goodsCount': goodsCount,
                'type': 'now'
            },
            dataType: "JSON",
            success: function(res) {
                if (res.code == 0) {
                    window.location.href = "{:url('Order/order')}?cartIds=" + res.data;
                } else {
                    layer.msg(res.msg, {
                        icon: 5
                    });
                }
            },
            error: function() {
                layer.msg("网络延迟，发送失败", {
                    icon: 5
                });
            }
        });
    });
    /*收藏与取消收藏*/
    // $('.nc_top1 .top .p3').click(function(){
    //     var obj = this;
    //     var goodsId = $(obj).data('id');
    //     if ($(obj).hasClass('cans')) {
    //         $.ajax({
    //             type: "POST",
    //             url: "{:url('Goods/collGoods')}",
    //             data: {'goodsId':goodsId,'action':'cancel'},
    //             dataType:"JSON",
    //             success:function(res){
    //                 if (res.code == 0) {
    //                     layer.msg(res.msg,{icon:6});
    //                     $(obj).removeClass('cans');
    //                     $('strong',obj).removeClass('canstr');
    //                     $('em',obj).html('收藏');
    //                 } else {
    //                     layer.msg(res.msg,{icon:5});
    //                 }
    //             },
    //             error: function(){
    //                 layer.msg("网络延迟，发送失败",{icon:5});
    //             }
    //         });
    //     } else {
    //         $.ajax({
    //             type: "POST",
    //             url: "{:url('Goods/collGoods')}",
    //             data: {'goodsId':goodsId,'action':'coll'},
    //             dataType:"JSON",
    //             success:function(res){
    //                 if (res.code == 0) {
    //                     layer.msg(res.msg,{icon:6});
    //                     $(obj).addClass('cans');
    //                     $('strong',obj).addClass('canstr');
    //                     $('em',obj).html('已收藏');
    //                 } else {
    //                     layer.msg(res.msg,{icon:5});
    //                 }
    //             },
    //             error: function(){
    //                 layer.msg("网络延迟，发送失败",{icon:5});
    //             }
    //         });
    //     }
    // });
    /*加入购物车*/
    $('.jiesuan1 .right .p1').click(function() {
        var obj = this;
        var goodsId = $(obj).data('id');
        var goodsCount = $('.tijia .J_input').val();
        $.ajax({
            type: "POST",
            url: "{:url('Cart/add')}",
            data: {
                'goodsId': goodsId,
                'goodsCount': goodsCount
            },
            dataType: "JSON",
            success: function(res) {
                if (res.code == 0) {
                    layer.msg(res.msg, {
                        icon: 6
                    });
                    $('.jiesuan1 .left .p2 i').show();
                    var oldCount = $('.jiesuan1 .left .p2 i').html();
                    var nowCount = parseInt(oldCount) + parseInt(goodsCount);
                    $('.jiesuan1 .left .p2 i').html(nowCount);
                } else {
                    layer.msg(res.msg, {
                        icon: 5
                    });
                }
            },
            error: function() {
                layer.msg("网络延迟，发送失败", {
                    icon: 5
                });
            }
        });
    });
    $(".tijia .J_add").click(function() {
        var n = $(this).siblings('.J_input').val();
        var num = parseInt(n) + 1;
        if (num == 0) {
            alert("cc");
        }
        $('.J_input').val(num);
    });
    $(".tijia .J_minus").click(function() {
        var n = $('.J_input').val();
        var num = parseInt(n) - 1;
        if (num == 0) {
            return
        }
        $('.J_input').val(num);
    });
</script>
{/block}